<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 th:text="${msg}"></h1>
<div id="app">
    <span>下面展示一个笑话</span>
    <button @Click="searchjoke">点击搜索</button>
    <br>
    <h5>{{joke}}</h5>

</div>
<script th:src="@{/static/js/Vue.js}"></script>
<script th:src="@{/static/js/axios.js}"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            joke: "",
        },
        methods: {
            searchjoke: function () {
                const that = this;
                axios.get("https://autumnfish.cn/api/joke")
                    .then(res => {
                        that.joke = res.data;
                    }, function (err) {
                        console.log(err)
                    })
            }
        }
    })
</script>
</body>
</html>